import { View, Text } from "@tarojs/components";
import {
  Button,
  Cell,
  Form,
  Input,
  InputNumber,
  Picker,
  TextArea,
} from "@nutui/nutui-react-taro";
import CombinationInput from "src/components/combination-input";
import CusPicker from "src/components/cus-picker";
import React, { useMemo, useRef, useState } from "react";
const pickerOptions = [
  { value: "3", text: "测斜" },
  { value: "0", text: "摄像头" },
  { value: "1", text: "轴力" },
  { value: "2", text: "水位" },
];
const autoTypeOptions = [
  { value: "0", text: "半自动" },
  { value: "1", text: "自动" },
];
const options1 = [
  {
    text: 0.5,
    value: 0.5,
  },
  {
    text: 1,
    value: 1,
  },
];
export default function bindProcess() {
  const [pointType, setPointType] = useState<string>("3");

  const pointTypePicker = useRef<any>();
  const autoTypePickerRef = useRef<any>();
  const sensorSpacingRef = useRef<any>();
  const differentFormRender = useMemo(() => {
    if (pointType === "1") {
      return (
        <>
          <Form.Item label="钢筋总面积" name="param1">
            <CombinationInput
              type="digit"
              placeholder="请输入数字"
              afterText={
                <View style={{ display: "flex" }}>
                  <Text>cm</Text>
                  <View
                    style={{
                      fontSize: "20rpx",
                      transform: "translate(0,-5rpx)",
                    }}
                  >
                    2
                  </View>
                </View>
              }
            />
          </Form.Item>
          <Form.Item label="钢筋弹模" name="param2">
            <Input type="digit" placeholder="请输入数字" />
          </Form.Item>
          <Form.Item label="混凝土总面积" name="param3">
            <CombinationInput
              type="digit"
              placeholder="请输入数字"
              afterText={
                <View style={{ display: "flex" }}>
                  <Text>cm</Text>
                  <View
                    style={{
                      fontSize: "20rpx",
                      transform: "translate(0,-5rpx)",
                    }}
                  >
                    2
                  </View>
                </View>
              }
            />
          </Form.Item>

          <Form.Item label="混凝土弹模" name="param4">
            <Input type="digit" placeholder="请输入数字" />
          </Form.Item>
          <Form.Item label="单根钢筋面积" name="param5">
            <CombinationInput
              type="digit"
              placeholder="请输入数字"
              afterText={
                <View style={{ display: "flex" }}>
                  <Text>cm</Text>
                  <View
                    style={{
                      fontSize: "20rpx",
                      transform: "translate(0,-5rpx)",
                    }}
                  >
                    2
                  </View>
                </View>
              }
            />
          </Form.Item>
          <Form.Item label="通道数量" name="channelCount">
            <Input type="digit" placeholder="请输入数字" />
          </Form.Item>
        </>
      );
    }
    // else if (pointType === "2") {
    //   return (
    //     <>
    //       <Form.Item
    //         label="地面高程"
    //         name="param1"
    //         style={{ marginLeft: "10px" }}
    //         initialValue={0}
    //       >
    //         <InputNumber className="input-number" />
    //       </Form.Item>
    //       <Form.Item label="管口标高" name="param2" initialValue={0}>
    //         <InputNumber className="input-number" />
    //       </Form.Item>
    //       <Form.Item label="地面标高" name="param3">
    //         <InputNumber className="input-number" />
    //       </Form.Item>

    //       <Form.Item
    //         label="初始值"
    //         name="param4"
    //         style={{ marginLeft: "24px" }}
    //       >
    //         <InputNumber
    //           className="input-number"
    //           max={0}
    //           placeholder="请输入负值"
    //         />
    //       </Form.Item>
    //       <Form.Item label="坑顶高程" name="param5">
    //         <InputNumber className="input-number" />
    //       </Form.Item>
    //     </>
    //   );
    // }
    else if (pointType === "3") {
      return (
        <>
          <Form.Item label="测斜管深度" name="param1">
            <Input type="digit" placeholder="请输入数字" />
          </Form.Item>
          <Form.Item
            label="传感器间隔"
            name="param2"
            trigger="onConfirm"
            getValueFromEvent={(...args) => args[1]}
            onClick={(event, ref: any) => {
              // console.log("ref", autoTypePickerRef);

              sensorSpacingRef.current?.open?.();
            }}
          >
            <CusPicker pickerOptions={options1} cref={sensorSpacingRef} />
          </Form.Item>
        </>
      );
    }
  }, [pointType]);
  return (
    <View>
      绑定
      <Form
        labelPosition="right"
        footer={
          <>
            <Button nativeType="submit" block type="primary">
              提交
            </Button>
          </>
        }
      >
        <Form.Item
          align="center"
          required
          label="测点名称"
          name="pointName"
          rules={[{ required: true, message: "请输入测点名称" }]}
        >
          <Input
            className="nut-input-text"
            placeholder="请输入测点名称"
            type="text"
          />
        </Form.Item>
        <Form.Item
          label="测点类型"
          name="pointType"
          trigger="onConfirm"
          getValueFromEvent={(...args) => args[1]}
          onClick={(event, ref: any) => {
            console.log("ref", pointTypePicker);

            pointTypePicker.current?.open?.();
          }}
        >
          <CusPicker
            pickerOptions={pickerOptions}
            setValue={setPointType}
            cref={pointTypePicker}
          />
        </Form.Item>
        <Form.Item
          label="监测类型"
          name="autoType"
          trigger="onConfirm"
          getValueFromEvent={(...args) => {
            console.log("ddddd", args);

            return args[1];
          }}
          onClick={(event, ref: any) => {
            // console.log("ref", autoTypePickerRef);

            autoTypePickerRef.current?.open?.();
          }}
        >
          <CusPicker pickerOptions={autoTypeOptions} cref={autoTypePickerRef} />
        </Form.Item>
        {differentFormRender}
      </Form>
    </View>
  );
}
